<template>
  <div ref="chartContainer" class="chart-container"></div>
</template>

<script>
import { ref, onMounted, watch } from 'vue';
import * as echarts from 'echarts';

export default {
  name: 'EChart',
  props: {
    options: {
      type: Object,
      required: true
    }
  },
  setup(props) {
    const chartContainer = ref(null);
    let chartInstance = null;

    onMounted(() => {
      chartInstance = echarts.init(chartContainer.value);
      chartInstance.setOption(props.options);
    });

    onActivated(() => {
      chartInstance.resize();
    });
    watch(() => props.options, (newOptions) => {
      chartInstance.setOption(newOptions);
    },{deep:true});

    return {
      chartContainer
    };
  }
};
</script>

<style scoped>

</style>
